<template>
  <div>

    <el-card>


      <div style="margin-left:10px">
        <el-input style="float:left;width:200px;margin-left:10px" v-model="searchByName" class='searchByName'
                  placeholder="请输入类型关键字"/>
        <!-- <i class="el-icon-search"></i> -->
        <el-button type="primary" @click="searchByNameFun" style="margin-left: 20px;">查询</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="类型编号" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="类型名称" width="240">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>备注: {{ scope.row.detail }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="240" prop="createTime"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">修改类型信息</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row>
        <el-col :span="12" :offset="12">
          <el-pagination layout="total,prev, pager, next,jumper,sizes " background small prev-text="上一页" next-text="下一页"
                         :total="total" :page-size="pageSize" :current-page="pageNow" :page-sizes="[5, 10, 50]"
                         style="margin:15px 0px"
                         @current-change="findPage" @size-change="findSize">
          </el-pagination>
        </el-col>
      </el-row>

      <!-- 设置添加按钮 -->
      <el-button style="margin:10px 0px" type="success" size="mini" @click="addShow = true">添加新类型</el-button>
    </el-card>
    <el-dialog title="添加类型" :visible.sync="addShow" :append-to-body="true" :modal-append-to-body="false">
      <el-form :model="form">
        <el-form-item label="类型名称" width="50%" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>

<!--        <el-form-item label="备注" :label-width="formLabelWidth">-->
<!--          <el-input v-model="form.detail" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addShow = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>

export default {
  name: 'TypeManagement',
  components: {},
  data() {
    return {
      searchByName: '',
      pageNow: 1,
      pageSize: 5,
      total: 0,
      addShow: false,
      //添加类型型的表单
      form: {
        id: 0,
        name: '',
        //   createTime:''
        detail: ''
      },
      formLabelWidth: '120px',
      tableData: []
    }
  },
  computed: {

  },
  mounted() {
    this.findPage(this.pageNow, this.pageSize)
  },
  methods: {
    // 根据物资的关键字查询
    searchByNameFun() {
      // console.log(this.searchByName)
      this.pageNow = 1

      if (this.value != '') {
        // 页面变动之后需要查询相同种类的变动页码的数据
        this.$http.get("/category/" + this.pageNow + "/" + this.pageSize + "?searchKey=" + this.searchByName).then(res => {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total
          console.log(this.tableData)
        });
        return
      }

    },
    //添加类型表单
    submitForm() {
      this.addShow = false
      console.log(this.form)
      this.$http.post("/category/addOrUpdate", this.form).then(res => {
        console.log(res.data)
        if (res.data.status) {
          this.$message({
            message: res.data.data,
            type: 'success'
          });
        } else {
          this.$message.error(res.data.msg);
        }
      })
      this.form = {}
      this.findPage(this.pageNow, this.pageSize)
    },
    findSize(size) {
      // console.log(size)
      this.pageSize = size
      this.findPage(this.pageNow, this.pageSize)
    },
    findPage(page) {
      // console.log(page)
      this.pageNow = page
      if (this.value != '') {
        // 页面变动之后需要查询相同种类的变动页码的数据
        this.$http.get("/category/" + this.pageNow + "/" + this.pageSize).then(res => {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total
          console.log(this.tableData)
        });
        return
      }
      // this.findAll(page, this.size)
    },
    handleEdit(index, row) {
      // console.log(index, row);
      this.addShow = true
      this.form = row
      this.pageNow = 1
      // this.$http.post("/category/updatecategory",this.form).then(res=>{
      //   console.log(res.data)
      //   if(res.data.status){
      //      this.$message({
      //       message: res.data.data,
      //       type: 'success'
      //     });
      //   }else{
      //     this.$message.error(res.data.msg);
      //   }
      // })
      // this.form = {}

      // this.findPage(this.pageNow)
      // this.form = {}
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$http.delete("/category/" + row.id).then(res => {
        console.log(res.data)
        if (res.data.status) {
          this.$message({
            message: res.data.data,
            type: 'success'
          });
          this.pageNow = 1
          this.findPage(this.pageNow)
        } else {
          this.$message.error(res.data.msg);
        }
      })
    }
  },
  watch: {
    searchByName(newName, oldName) {
      if (newName === '') {
        // console.log("为空了")
        this.findPage(1)
      }
    }
  }

}
</script>


<style scoped>

</style>

